<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org" th:replace="~{modules/layout :: html(content = ~{::content})}">
<th:block th:fragment="content">
    <div id="content">
      <th:block th:each="post : ${posts}">
        <article class="article article-type-post" itemprop="blogPost" itemscope="">
          <div class="article-inner">
            <header class="article-header">
              <h2 class="article-title" itemprop="name">
                <a th:href="@{${post.status?.permalink}}" th:text="${post.spec.title}"></a>
              </h2>
              <div class="article-meta">
                <time class="article-date" 
                  itemprop="datePublished"
                  th:datetime="${#temporals.format(post.spec.publishTime, 'MMMM dd yyyy')}"
                  th:text="${#temporals.format(post.spec.publishTime, 'MMMM dd yyyy')}"
                  ></time>
              </div>
            </header>
            <div class="article-entry" itemprop="articleBody">
              <p th:text="${post.status?.excerpt}"></p>
            </div>
            <div class="article-more-link">
              <a th:href="@{${post.status?.permalink}}">read more</a>
            </div>
          </div>
        </article>
      </th:block>

      <nav class="page-nav">
        <a class="extend prev" th:if="${posts.hasPrevious()}" rel="prev" th:href="@{${posts.prevUrl}}">« Prev</a>
        <span class="page-number" th:with="totalPage=${posts.totalPages}"
          th:text="${posts.page} + '  /  ' + ${totalPage}">
        </span>
        <a class="extend next" th:if="${posts.hasNext()}" rel="next" th:href="@{${posts.nextUrl}}">Next »</a>
      </nav>
  </div>
</th:block>

</html>